<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/css-comment.css">
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/swiper-4.3.3.min.css">
    <script src="js/vue2.5.16.js"></script>
    <style>
        .weui-tabbar {
            position: fixed;
            bottom: 0;
            background: #fff;
        }

        .weui-toast {
            margin-left: 0;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="home" v-cloak>
    <header class="header">
        <a href="city.html" class="header-address">{{city}}</a>
        <div class="header-input">
            <input type="text" placeholder="请输入搜索内容">
        </div>
    </header>
    <div class="home-com">
        <!--轮播图-->
        <broadcast-swiper :broadcast="broadcast"></broadcast-swiper>
        <zh-nav :nav="nav"></zh-nav>
        <div class="redEnvelopes">
            <img src="./images/red.png" alt="">
        </div>
        <!--优惠券-->
        <div class="coupon-wrap">
            <div class="wrap-title">
                <h4>优惠券</h4>
                <a href="details.html" class="more">更多</a>
            </div>
            <div class="coupon-box">
                <ul class="coupon-ul clearfix">
                    <li class="coupon-li" v-for="(item,index) in coupon" @click="receive(index)">
                        <div class="coupon-bg">
                            <div class="coupon-com">
                                <div class="coupon-mj">
                                    <p class="Voucher">
                                        <small>￥</small>
                                        <span class="rmb">{{item.rmb}}</span>
                                    </p>
                                    <p class="mj">消费满{{item.mj}}元使用</p>
                                </div>
                                <div class="receive">{{item.isReceive?'已领取':'立即领取'}}</div>
                            </div>
                        </div>
                        <p class="coupon-text">{{item.storeCou}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <!--团购-->
        <div>
            <div class="wrap-title">
                <h4>团购</h4>
                <a href="details.html" class="more">更多</a>
            </div>
            <ul class="group-ul">
                <li @click="groupPage" class="group-li" v-for="item in GroupPurchase">
                    <div class="group-img">
                        <img :src="item.img" alt="">
                    </div>
                    <p class="group-title">{{item.title}}</p>
                    <div>
                        <span class="price">￥{{item.price}}</span>
                        <span class="Discount">{{item.Discount}}折</span>
                        <span class="OriginalPrice">￥{{item.OriginalPrice}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <!--附近商家-->
        <div style="margin-bottom: .5rem">
            <div class="wrap-title">
                <h4>附近商家</h4>
                <!--<a href="##" class="more">更多</a>-->
            </div>
            <div class="business-box">
                <div @click="details" class="business-list clearfix" v-for="item in business">
                    <div class="business-img">
                        <img :src="item.img" :alt="item.storeName">
                    </div>
                    <div class="business-com">
                        <div class="com-list">
                            <span class="storeName">{{item.storeName}}</span>
                            <p class="group-table">
                                <span class="j">卷</span>
                                <span class="t">团</span>
                                <span class="x">新</span>
                            </p>
                        </div>
                        <p style="margin-bottom: 0.02rem;font-size:.13rem;color:#999">{{item.time}}营业</p>
                        <div class="com-list">
                            <p>
                                <span class="table" v-for="item in item.table">{{item}}</span>
                            </p>
                            <span class="">{{item.distance}}km</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <zh-tabbar is-tab="0"></zh-tabbar>
</div>
</body>
<script src="js/rem.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/swiper-4.3.3.min.js"></script>
<script src="js/broadcast.js"></script>
<script src="js/nav.js"></script>
<script src="js/tabbar.js"></script>
<script>
    var home = new Vue({
        el: "#home",
        data: {
            city: "wertsdfg",
            broadcast: [
                "./images/banner.png"
            ],
            nav: [
                {img: "./images/nav1.png", text: "美食"},
                {img: "./images/nav2.png", text: "超市"},
                {img: "./images/nav3.png", text: "休闲娱乐"},
                {img: "./images/nav4.png", text: "运动健身"},
                {img: "./images/nav5.png", text: "丽人"},
                {img: "./images/nav6.png", text: "KTV"},
                {img: "./images/nav7.png", text: "摄影"},
                {img: "./images/nav8.png", text: "全部"},
            ],
            coupon: [
                {rmb: 100, mj: 199, storeCou: "优惠券", isReceive: true},
                {rmb: 1000, mj: 1999, storeCou: "优惠券2", isReceive: false},
                {rmb: 1000, mj: 1999, storeCou: "优惠券2", isReceive: false},
            ],

            GroupPurchase: [
                {img: "./images/tuan.png", title: "2-3人套餐", price: "15", Discount: "9", OriginalPrice: "25"},
                {img: "./images/tuan.png", title: "2-3人套餐", price: "15", Discount: "9", OriginalPrice: "25"},
                {img: "./images/tuan.png", title: "2-3人套餐", price: "15", Discount: "9", OriginalPrice: "25"},
                {img: "./images/tuan.png", title: "2-3人套餐", price: "15", Discount: "9", OriginalPrice: "25"},
            ],
            business: [
                {
                    img: "./images/fj.png", storeName: "龙湖甜品店", time: "8:00-21:00", distance: "123",
                    table: ['餐饮美食', '加常土菜']
                }, {
                    img: "./images/fj.png", storeName: "龙湖甜品店", time: "8:00-21:00", distance: "123",
                    table: ['餐饮美食', '加常土菜']
                }
            ]
        },
        mounted: function () {

        },
        methods: {
            receive: function (index) {
                var that = this;
                if (!that.coupon[index].isReceive) {
                    $.toast('领取成功', function () {
                        Vue.set(that.coupon[index], 'isReceive', true)
                    })
                    that.isCoupon = false;
                } else {
                    $.toast('该优惠劵已领取', 'text')
                }
            },
            //团购
            groupPage: function () {
                window.location.href = 'GroupPurchase_detail.html'
            },
            //团购
            details: function () {
                window.location.href = 'details.html'
            }
        }
    })

    var city = decodeURI(window.location.href.split('=')[1]);
    if (city == 'undefined' || city == "" ) {
        console.log('当前位置')
        home.city = '当前位置';
    } else {
        console.log(city)
        home.city = city
    }
</script>
</html>